<template>
    <div>
          <!-- 面包屑导航条 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户反馈列表</el-breadcrumb-item>
        </el-breadcrumb>
         <el-card>
              <el-row>

                <!--工具条-->
                <el-form :inline="true" :model="searchfrom" class="toolbar" label-position="right" label-width="70px">
                    <el-row>

                        <el-form-item label="手机号">
                            <el-input v-model="searchfrom.queryString"></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-button @click="searchUserList" type="success" style="width: 170px">查询</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-row>
             <el-table
              :data="userfeedlist"
                border
                stripe
                style="width: 100%">
                 <el-table-column
                type="index">
                </el-table-column>
                  <el-table-column
                prop="nickName"
                label="昵称"
                >
                </el-table-column>
                  <el-table-column
                prop="mobile"
                label="手机号"
                >

                </el-table-column>
                  <el-table-column
                prop="type"
                label="类型"
                >
                </el-table-column>
                <el-table-column
                prop="content"
                label="反馈内容"
               >

                <!-- <template slot-scope="scope">
                    <el-tooltip :content="scope.row.message" placement="bottom" effect="light" >
                    <el-button>查看</el-button>
                    </el-tooltip>
                  </template> -->
                </el-table-column>
                </el-table-column>
                  <el-table-column
                prop="createTime"
                label="时间"
                ></el-table-column>
             </el-table>
              <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchfrom.pageNo"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="searchfrom.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
         </el-card>

    </div>
</template>
<script>
export default {
    data() {
        return {
            userfeedlist:[],
             searchfrom: {
                queryString: '',
                pageNo: 1,
                pageSize: 10
            },
             total: 0
        }
    },
    mounted(){
        this.getfeedList()
    },
    methods: {
        searchUserList() {
             this.searchfrom.pageNo = 1;
        this.getfeedList();
        },
        getfeedList() {
            // POST
            this.$http.post('/manage/user/feedback',this.searchfrom).then(res => {
                // console.log(res)
                if(res.data.status == 1) {
                    this.userfeedlist = res.data.data.list
                    console.log(this.userfeedlist)
                    this.total = res.data.data.total
                }else {
                     this.$message.error(res.data.message);
                }
            })
        },
          // 监听 pagesize 的变化
        handleSizeChange(newSize) {
        // 把最新的 pagesize 赋值给 this.queryinfo
        this.searchfrom.pageSize = newSize;
        this.getfeedList();
        },
        // 监听 页码值 的变化
        handleCurrentChange(newPageNum) {
        console.log(newPageNum);
        this.searchfrom.pageNo = newPageNum;
        this.getfeedList();
        },
    }
}
</script>
